<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>四肢小狗banner</title>
    <link rel="stylesheet" href="css/reset.css">
    <link rel="stylesheet" href="css/四只小狗banner.css">
</head>
<body>
    <div class="gou" id = "gou">
        <div id="banner">
            <div id="banner_bg"></div>  <!--标题背景-->
            <a href="#" id="banner_info">第三只小狗</a> <!--标题-->
            <ul id="list"><li class="on">1</li><li class="">2</li><li>3</li><li class="">4</li></ul>
            <div id="banner_list">
                <a href="#" target="_blank" ><img src="images/p1.jpg" title="第一只小狗" alt="可爱的小狗"></a>
                <a href="#" target="_blank" ><img src="images/p2.jpg" title="第二只小狗" alt="可爱的小狗"></a>
                <a href="#" target="_blank" ><img src="images/p3.jpg" title="第三只小狗" alt="可爱的小狗"></a>
                <a href="#" target="_blank" ><img src="images/p4.jpg" title="第四只小狗" alt="可爱的小狗"></a>
            </div>
        </div>
    </div>
    <div class="hongse">
        <a href="#" target="_blank" ><img class = "ca" src="images/p1.jpg" title="第一只小狗" alt="可爱的小狗"></a>
        <a href="#" target="_blank" ><img src="images/p2.jpg" title="第二只小狗" alt="可爱的小狗"></a>
        <a href="#" target="_blank" ><img src="images/p3.jpg" title="第三只小狗" alt="可爱的小狗"></a>
        <a href="#" target="_blank" ><img src="images/p4.jpg" title="第四只小狗" alt="可爱的小狗"></a>
    </div>
    <!--导入js-->
    <script src="js/jquery-1.11.1.min.js"></script>
    <!--<script src="js/四只小狗banner.js"></script>-->
    <script src="js/四只小狗banner插件模式.js"></script>
    <script>
        $(document).ready(function(){
            $('#gou').silder({
                parentContainerId:"gou",
                bannerInfoId : "banner_info",
                btnUlId : "list",
                banner_listId :"banner_list"
            });
        });
    </script>
</body>
</html>